<script setup lang='ts'>
import { useOpen } from '@/pages/home/component/use-open'
import { ref, toRefs } from 'vue'

const props = defineProps<{
    data: any
}>()

const { openNewWindow } = useOpen()

const { data } = toRefs(props)

const config = ref({
    autoplay: true,
    gap: '48px',
    perPage: 4,
    rewind: true,
})

function goTo(item: any) {
    openNewWindow('/search', { bids: item.relationId, name: item.name }, '_self')
}
</script>

<template>
    <div class="bg-#2C2C2C w-full">
        <div class="brand mx-auto flex h-210 w-1300">
            <div class="jc-home-title">
                <span style="color: #fff;">优选品牌</span>

                <p>PREFERRED BRAND</p>
            </div>

            <div v-if="data?.items?.length"
                 class="brand-item"
            >
                <Splide class="sence-splide"
                        :options="config"
                >
                    <SplideSlide v-for="(item, index) in data?.items"
                                 :key="index"
                    >
                        <img class="rounded-4 h-130 w-285 cursor-pointer"
                             :src="item.img"
                             alt=""
                             @click="goTo(item)"
                        >
                    </SplideSlide>
                </Splide>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.brand {
    background: #2c2c2c;
    align-items: center;

    .brand-item {
        position: relative;
        top: 0;
        left: 0;
        width: calc(100% - 270px);
        margin-left: 75px;
        cursor: pointer;

        .sence-splide {
            :deep(.splide__pagination) {
                display: none;
            }

            :deep(.splide__arrows) {
                position: absolute;
                bottom: 0;
                right: 56px;

                .splide__arrow {
                    width: 40px;
                    height: 40px;
                    background: #fff;
                    color: #1d2129;

                    svg {
                        height: 0.6em;
                        width: 0.6em;
                    }
                }

                .splide__arrow--prev {
                    left: -60px;
                }

                .splide__arrow--next {
                    right: -40px;
                }
            }
        }
    }
}
</style>
